<template>
    <div>
        <div class="cover" v-if="isShow"></div>
        <transition @before-enter="handleBeforeEnter" 
         @enter="handleEnter">
            
            <slot></slot>
        </transition>

    </div>
</template>
<!-- 设置 @before-enter="handleBeforeEnter"  的事件状态
v-enter  @before-enter  
v-enter-active @enter
v-enter-to @after-enter
-->
<script>
export default {
  

    data() {
        return {
            isShow:false
        };
    },

    mounted() {
        
    },

    methods: {
        handleBeforeEnter(){
            // console.log(1);
            this.isShow=true;
        },
        handleEnter(){
            // console.log(2);
            setTimeout(()=>{
                this.isShow = false
            },200)
        }
    },
};
// 1 先在data里面定义一个isShow为true 绑定到 cover最高白板上v-if让他初始值就是false
// 然后我们就可以看见里面就是没有白板了 然后在 v-enter  @before-enter  让他显示为true白板出来了
//  @enter="handleEnter 设置时间间隔器这样就可以看见白板然后消失了
</script>

<style  scoped>
/*  从隐藏到显示 */
.v-enter-active{
    animation: animate 2s linear;
}
/* 设置动画效果的时间 */
@keyframes animate{
        0%{
            opacity: 0;
            transform: translateY(0);
        }
        50%{
            opacity: .5;
            transform: translateY(20px);
        }
        100%{
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* 设置div的白板 盖着所有的屏幕 设置他的优先级 */
.cover{
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    z-index: 100;
}
</style>